<template>
  <div>
    <u-popup
      mode="bottom"
      :safeAreaInsetBottom="false"
      :show="true"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
      @close="$emit('hideChange')"
    >
      <view class="sellerAddressList">
        <image
          src="@/static/img56.png"
          class="close"
          mode=""
          @click="$emit('hideChange')"
        ></image>
        <view class="block1 c1F1F1F f36 fontWeight"> 请选择自提地址 </view>
        <u-radio-group v-model="value" placement="column" @change="groupChange">
          <view class="block3">
            <view
              v-for="(item, index, key) in addressList"
              :key="key"
              class="list flex aitems between"
            >
              <view class="left">
                <div class="flex aitems between">
                  <div class="flex">
                    <div class="consignee f30 fontWeight">
                      联系人：{{ item.address.consignee }} -
                      {{ item.address.mobile }}
                    </div>
                    <!-- <div class="mobile f28 fontWeight">- {{ item.mobile }}</div> -->
                  </div>
                </div>
                <div>
                  <div class="address f24">
                    自提点名称：{{ item.address.name }}
                  </div>
                  <div
                    class="address f24 flex"
                    @click.stop="openLocation(item, index)"
                  >
                    <div style="margin: 0 10rpx 0 0">
                      详细地址：{{ item.address.province }}{{ item.address.city
                      }}{{ item.address.district }}{{ item.address.address }}
                    </div>
                    <u-icon
                      name="map-fill"
                      size="18"
                      color="var(--view-theme)"
                    ></u-icon>
                  </div>
                </div>
              </view>
              <view class="right flex aitems between">
                <view class="couponbtn">
                  <u-radio
                    activeColor="var(--view-theme)"
                    :name="item.address.id"
                    style="transform: scale(0.9)"
                    @change="radioChange"
                  />
                </view>
              </view>
            </view>
            <nodata v-if="addressList.length == 0" />
          </view>
        </u-radio-group>
        <view class="btn f32 cfff" @click="couponsChangOk"> 确定 </view>
        <view class="" style="height: 100rpx"> </view>
      </view>
    </u-popup>
  </div>
</template>

<script>
import colors from "@/mixins/color";
import { msg } from "../utils/wxAPI";
import { getEnv } from "@/utils/env.js";
export default {
  mixins: [colors],
  name: "sellerAddressList",
  props: {
    addressList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    console.log(this.addressList);
  },
  methods: {
    radioChange(n) {
      console.log("radioChange", n);
    },
    async groupChange(e) {
      console.log(e);
      this.value = e;
    },
    async couponsChangOk() {
      if (!this.value) {
        return msg("请选择自提地址");
      }
      this.addressList.map((item) => {
        if (item.address.id == this.value) {
          this.$emit("addressInfoChange", item);
        }
      });
    },

    openLocation(item, index) {
      // #ifdef MP-WEIXIN
      uni.openLocation({
        name: item.address.name,
        address: item.address.address,
        latitude: Number(item.address.lat),
        longitude: Number(item.address.lng),
      });
      // #endif
      // #ifdef H5
      if (getEnv() == "WX_PUBLIC") {
        /**调用公众号SDK**/
        this.$jwx.openLocation({
          name: item.address.name,
          address: item.address.address,
          latitude: Number(item.address.lat),
          longitude: Number(item.address.lng),
          callback: function (res) {},
        });
      }
      if (getEnv() == "H5") {
        /**调用自带地图**/
        uni.openLocation({
          name: item.address.name,
          address: item.address.address,
          latitude: Number(item.address.lat),
          longitude: Number(item.address.lng),
          fail(err) {},
        });
      }
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.sellerAddressList {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .block1 {
    padding: 36rpx 0;
    text-align: center;
  }

  .block2 {
    margin: 50rpx 0rpx 0 30rpx;

    .label {
      border-radius: 18rpx;
      border: 2rpx solid #f5f5f5;
      padding: 17rpx 0rpx;
      display: inline-block;
      margin: 0 20rpx 20rpx 0;
      width: 210rpx;
      text-align: center;
    }

    .active {
      border: 2rpx solid var(--view-theme);
      background: var(--view-minorColorT);
    }
  }

  .block3 {
    background: #f5f5f5;
    padding: 30rpx 30rpx 0;
    height: 55vh;
    overflow-y: scroll;
    // margin: 30rpx 0rpx 0 30rpx;

    .list {
      padding: 30rpx 32rpx;
      background: #fff;
      border-radius: 28rpx;
      margin: 0 0 24rpx 0;

      .left {
        width: calc(100% - 50rpx);
        // width: 160rpx;
        // text-align: center;

        .mobile {
          //   margin-left: 30rpx;
        }

        .address {
          margin-top: 20rpx;
        }

        .price {
          color: #1f1f1f;
          font-weight: bold;

          .unit {
            font-size: 40rpx;
          }

          .num {
            font-size: 64rpx;
          }
        }

        .price1 {
          font-size: 24rpx;
          color: #1f1f1f;
        }

        .label {
          margin: 16rpx auto 0;
          color: var(--view-theme);
          font-size: 24rpx;
          border-radius: 10rpx;
          border: 2rpx solid var(--view-theme);
          background: var(--view-minorColorT);
          width: 140rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
        }
      }

      .border {
        border-left: 2rpx dashed #858585;
        width: 2rpx;
        height: 160rpx;
        margin: 0 20rpx;
      }

      .right {
        // width: calc(100% - 160rpx - 44rpx);

        .couponinfo {
          width: 350rpx;

          .name {
            color: #1f1f1f;
            font-size: 32rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .time {
            color: #525252;
            font-size: 24rpx;
            margin: 24rpx 0 0;
          }

          .log {
            color: #525252;
            font-size: 24rpx;
            margin-top: 8rpx;

            span {
              margin-left: 4rpx;
            }
          }
        }

        .couponbtn {
          display: flex;
          justify-content: flex-end;
          // border-radius: 40rpx;
          // background: var(--view-theme);
          // display: flex;
          // padding: 12rpx 40rpx;
          // justify-content: center;
          // align-items: center;
          // gap: 10rpx;
          // color: #fff;
          // font-size: 24rpx;
          // margin-left: 40rpx;
        }
      }
    }
  }

  .btn {
    background: var(--view-theme);
    border-radius: 44rpx;
    margin: 30rpx 75rpx 0;
    padding: 24rpx 0;
    text-align: center;
  }
}
</style>
